<template>
  <vxe-modal
    resize
    esc-closable
    width="55%"
    height="50%"
    showFooter
    v-model="formVisible"
    @hide="formClose"
    :loading="formLoading"
  >
    <template slot="title">
      <span>岗位信息表单</span>
    </template>
    <template>
      <el-scrollbar class="scrollbar-handle">
        <vxe-form
          ref="firstForm"
          title-width="100"
          title-align="right"
          :data="formEntity"
          :rules="rules"
          span="12"
        >
          <vxe-form-item
            title="岗位编号"
            field="B_EnCode"
            :title-suffix="{
              message: '岗位编号不能重复！',
              icon: 'fa fa-exclamation-circle',
            }"
          >
            <el-input
              v-model="formEntity.B_EnCode"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item
            title="岗位名称"
            field="B_Name"
            :title-suffix="{
              message: '岗位名称不能重复！',
              icon: 'fa fa-exclamation-circle',
            }"
          >
            <el-input
              v-model="formEntity.B_Name"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item title="所属部门" field="B_DepartmentId">
            <rayd-select :options="depTreeList" v-model="formEntity.B_DepartmentId" tree-config
              @change="
                () => {
                  if (!this.formLoading) {
                    this.$set(this.formEntity,'B_ParentId','')
                  }
                }
              "
            />
          </vxe-form-item>
          <vxe-form-item title="所属岗位">
            <rayd-select :options="postTreeList" v-model="formEntity.B_ParentId" tree-config></rayd-select>
          </vxe-form-item>
          <vxe-form-item title="描述" field="B_Description" span="24">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              maxlength="50"
              show-word-limit
              placeholder="请输入"
              clearable
              v-model="formEntity.B_Description"
            ></el-input>
          </vxe-form-item>
        </vxe-form>
      </el-scrollbar>
    </template>
    <template slot="footer">
      <el-button type="primary" v-form-validate="formSubmit">保存</el-button>
      <el-button @click="formVisible = false">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script> 
import { Post } from "@/api";
export default {
  name: "Form",
  props: {
    //组织架构主键
    manaId: {
      type: String,
      required: true,
    },
    //部门树型数据
    depTreeList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      /* 实体数据 */
      postTreeList: [], //岗位树型数据
      //存放表单ref数组
      formArr: ["firstForm"],
      //表单可见
      formVisible: false,
      //表单加载中
      formLoading: false,
      //表单实体
      formEntity: {},
      //表单验证规则（规则键必须和表单键一致）
      rules: {
        B_EnCode: [
          {
            required: true,
            validator: ({ itemValue, property }) => {
              return new Promise((resolve, reject) => {
                if (this.util.validateNull(itemValue)) {
                  reject(new Error("不能为空！"));
                } else {
                  Post.ValidateExist({
                    id: this.formEntity.B_PostId,
                    field: property,
                    value: itemValue,
                    manaId: this.manaId,
                  })
                    .then((res) => {
                      resolve();
                    })
                    .catch((err) => {
                      reject(new Error("岗位编号已存在！"));
                    });
                }
              });
            },
          },
        ],
        B_Name: [
          {
            required: true,
            validator: ({ itemValue, property }) => {
              return new Promise((resolve, reject) => {
                if (this.util.validateNull(itemValue)) {
                  reject(new Error("不能为空！"));
                } else {
                  Post.ValidateExist({
                    id: this.formEntity.B_PostId,
                    field: property,
                    value: itemValue,
                    manaId: this.manaId,
                  })
                    .then((res) => {
                      resolve();
                    })
                    .catch((err) => {
                      reject(new Error("岗位名称已存在！"));
                    });
                }
              });
            },
          },
        ],
        B_DepartmentId: [{ required: true, message: "必选项" }],
      },
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {},
    //表单开启
    formOpen(row) {
      //打开表单
      this.formVisible = this.formLoading = true;
      if (!row) {
        //新增
      } else {
        //编辑
        this.formEntity = JSON.parse(JSON.stringify(row));
      }
      //初始化岗位树形数据
      Post.GetTreeList({
        B_ManaframeId: this.manaId,
        B_DepartmentId: this.formEntity.B_DepartmentId,
        isDeep: false,
      }, this.formEntity.B_PostId).then((res) => {
        this.postTreeList = res;
        this.formLoading = false;
      });
    },
    //表单提交
    formSubmit() {
          //所属组织架构
          this.formEntity.B_ManaframeId = this.manaId;
          //验证通过
          Post.Save(this.formEntity).then((res) => {
            this.formVisible = false; //关闭弹窗
            this.$emit("refresh"); //刷新表格
          });
    },
    //表单关闭
    formClose() {
      //清除表单验证
      this.util.formClearValid(this.formArr);
      //数据归位
      Object.assign(this.$data, this.$options.data.call(this))
    },
  },
};
</script>

<style lang="less" scoped>
</style>